<template>
  <!-- 付款类型占比 -->
  <div id="proportionOfReimburseType">
    <div class="topBox">
      <el-icon class="icon" color="#BE68E3" size="26"
        ><el-icon-caret-right
      /></el-icon>
      <p>付款类型占比</p>
    </div>
    <scEcharts :option="option"></scEcharts>
  </div>
</template>
<script>
import scEcharts from '@/components/scEcharts'
var colorList = ['#FBC858', '#41EE9C', '#FF8550', '#00B6FF',]
export default {
  name: 'proportionOfReimburseType',
  components: {
    scEcharts
  },
  data () {
    return {
      option: {
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {d}%'
        },
        legend: {
          icon: "circle",
          bottom: '10'
        },
        series: [
          // 主要展示层的
          {
            radius: ['29%', '59%'],
            center: ['50%', '50%'],
            radius: '60%',
            type: 'pie',
            itemStyle: {
              normal: {
                color: function (params) {
                  return colorList[params.dataIndex]
                }
              }
            },
            labelLine: {
              normal: {
                show: true,
                lineStyle: {
                  color: '#d3d3d3'
                },
                align: 'right'
              },
              color: "#000",
              emphasis: {
                show: true
              }
            },
            label: {

            },
            data: [],
          },
          // 边框的设置
          {
            radius: ['54%', '70%'],
            center: ['50%', '50%'],
            type: 'pie',
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            animation: false,
            tooltip: {
              show: false
            },
            itemStyle: {
              normal: {
                color: 'rgba(250,250,250,0.5)'
              }
            },
            data: [{
              value: 1,
            }],
          }
        ]
      }
    }
  },
  props: {
    date: {
      type: String,
      required: true,
      default: () => new Date().getFullYear().toString()
    }
  },
  watch: {
    date (val) {
      this.getData()
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    async getData () {
      let { data } = await this.$API.finance.getProportionOfPayment.get({ time: this.date })
      this.option.series[0].data = data
    }
  }
}
</script>
<style lang="scss" scoped>
#proportionOfReimburseType {
  width: 40%;
  height: 100%;
  padding: 20px 20px 40px 20px;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.1);
  .topBox {
    display: flex;
    align-items: center;
    font-size: 18px;
  }
}
</style>